<!--
 * @Author: ChengNan 1429323234@qq.com
 * @Date: 2024-09-05 10:21:14
 * @LastEditors: ChengNan 1429323234@qq.com
 * @LastEditTime: 2024-09-05 10:37:08
 * @FilePath: /src/views/0.web-front/7天入门/5.选择器2.html
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .class1 {
      width: 200px;
      height: 200px;
      background-color: deepskyblue;
    }
    .class1::before {
      /* 伪类选择器-伪元素,用于创建普通元素 */
      content: 'before';
    }
    .class1::after {
      /* 伪类选择器-伪元素,用于创建普通元素 */
      content: 'after';
      color: aliceblue;
    }
    .class1:hover {
      background-color: plum;
    }
    ul li:first-child {
      background-color: lightblue;
    }
    ul li:last-child {
      background-color: lightblue;
    }
    ol li:nth-child(even) {
      background-color: lightcoral;
    }
    .class2 p:nth-of-type(odd) {
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="class1">
    <p>content</p>
  </div>
  <ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
  <ol>
    <li>text</li>
    <li>text</li>
    <li>text</li>
    <li>text</li>
  </ul>
  <div class="class2" style="border: 1px solid red;">
    <div style="background-color: lightgrey; padding: 10px;">
      <p>class 选择器</p>
      <div>11 11 11</div>
      <p>class 选择器</p>
      <p>class 选择器</p>
    </div>
    <p>class 选择器</p>
    <div>11 11 11</div>
    <p>class 选择器</p>
    <p>class 选择器</p>
  </div>
</body>
</html>